import { PageContainer } from '@ant-design/pro-components';
import React, { useRef, useState, useEffect } from 'react';
import { Descriptions, Card, Form, Input, Button ,DatePicker,message,Radio} from 'antd';
import { useLocation } from 'react-router-dom';
import { userpagedetail,userpageadd ,userpageupdate} from '@/services/system/user';
import { useNavigate } from 'react-router-dom';
import moment from 'moment';
import { log } from '@antv/g2plot/lib/utils';
import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token }) => ({
  container: {
    padding: '24px',
    background: '#f5f5f5',
    minHeight: 'calc(100vh - 48px)',
  },
  card: {
    borderRadius: '8px',
    boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)',
  },
  form: {
    maxWidth: '800px',
    margin: '0 auto',
  },
  formItem: {
    marginBottom: '24px',
    '& .ant-form-item-label': {
      fontWeight: 500,
    },
  },
  input: {
    height: '40px',
    borderRadius: '6px',
  },
  datePicker: {
    width: '100%',
    height: '40px',
    borderRadius: '6px',
  },
  radioGroup: {
    display: 'flex',
    gap: '32px',
  },
  buttonGroup: {
    display: 'flex',
    justifyContent: 'center',
    gap: '16px',
    marginTop: '40px',
  },
  submitButton: {
    width: '120px',
    height: '40px',
    borderRadius: '6px',
  },
  cancelButton: {
    width: '120px',
    height: '40px',
    borderRadius: '6px',
  },
}));

const UserManageAdd: React.FC = () => {
  const { styles } = useStyles();
  const location = useLocation();
  const [Userrecords, setUserrecords] = useState<any[]>([]);
  const record = location.state?.record || {};
  const userData = record;
  console.log('location', location);
  const [form] = Form.useForm();
  const navigate = useNavigate();
  console.log('userData',userData);

  useEffect(() => {
    const initialValues = {
      ...userData,
      birthday: userData.birthday ? moment(userData.birthday) : undefined
    };

    form.setFieldsValue(initialValues);
  }, [userData]);
  const handleCancel = () => {
    navigate('/system/usermanage');
  };
  const onFinish = async (values) => {
    try {
      const params = {
        ...values,
        id: userData.id,
        birthday: values.birthday ? moment(values.birthday).format('YYYY-MM-DD') : undefined
      };

      const response = await userpageupdate(params);
      if (response.code === 200) {
        message.success('提交成功');
        navigate('/system/usermanage');
      }
    } catch (error) {
      console.error('提交失败:', error);

    }
  };
  return (

    <PageContainer
      header={{
        title: '修改用户',
        breadcrumb: {
          routes: [
            {
              path: '/system',
              breadcrumbName: '系统管理',
            },
            {
              path: '/system/usermanage',
              breadcrumbName: '用户管理',
            },
            {
              path: '',
              breadcrumbName: '修改用户',
            },
          ],
        },
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'center', padding: '24px' }}>
        <Card style={{ width: '100%', maxWidth: '800px' }}>

          <Form
            form={form}

            layout="vertical"
            onFinish={onFinish}

          >


            <Form.Item
              name="userName"
              label="用户名"
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item
              name="name"
              label="姓名"
              rules={[{ required: true, message: '请输入姓名' }]}
            >
              <Input placeholder="请输入姓名" />
            </Form.Item>
            <Form.Item
              name="sex"
              label="性别"
              // className={styles.formItem}
            >
              <Radio.Group>
                <Radio value={0}>男</Radio>
                <Radio value={1}>女</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item
              name="birthday"
              label="生日"
              rules={[{ required: true, message: '请选择生日' }]}
            >
              <DatePicker
                placeholder="请选择生日"
                format="YYYY-MM-DD"
                style={{ width: '100%' }}
              />
            </Form.Item>
            <Form.Item
              name="address"
              label="地址"
              rules={[{ required: true, message: '请输入地址' }]}
            >
              <Input placeholder="请输入地址" />
            </Form.Item>
            <Form.Item
              name="email"
              label="邮箱"
              rules={[{ required: true, message: '请输入邮箱' }]}
            >
              <Input placeholder="请输入邮箱" />
            </Form.Item>
            <Form.Item
              name="phone"
              label="手机号"
              rules={[{ required: true, message: '请输入手机号' }]}
            >
              <Input placeholder="请输入手机号" />
            </Form.Item>

            <div className={styles.buttonGroup}>
              <Button
                onClick={handleCancel}
                className={styles.cancelButton}
              >
                返回
              </Button>
              <Button
                type="primary"
                htmlType="submit"
                className={styles.submitButton}
              >
                提交
              </Button>
            </div>
          </Form>
        </Card>
      </div>
    </PageContainer>
  );
};

export default UserManageAdd;
